<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import TnSwitch from '@tuniao/tnui-vue3-uniapp/components/switch/src/switch.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'

import { useAppI18n } from '@/hooks/use-i18n'

const { t } = useAppI18n()

const formData = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
  securityQuestion: '',
  securityAnswer: ''
})

const showOldPassword = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const showSecurityAnswer = ref(false)

// 密码强度检测
const passwordStrength = computed(() => {
  const password = formData.newPassword
  if (!password) return { level: 0, text: '', color: '', feedback: [] }
  
  let score = 0
  let feedback = []
  
  if (password.length >= 8) score += 1
  else feedback.push('至少8位')
  
  if (/[a-z]/.test(password)) score += 1
  else feedback.push('包含小写字母')
  
  if (/[A-Z]/.test(password)) score += 1
  else feedback.push('包含大写字母')
  
  if (/[0-9]/.test(password)) score += 1
  else feedback.push('包含数字')
  
  if (/[^a-zA-Z0-9]/.test(password)) score += 1
  else feedback.push('包含特殊字符')
  
  if (score <= 1) return { level: score, text: '弱', color: '#ff4d4f', feedback }
  if (score <= 3) return { level: score, text: '中', color: '#faad14', feedback }
  return { level: score, text: '强', color: '#52c41a', feedback }
})

// 安全问题选项
const securityQuestions = [
  '您的出生地是哪里？',
  '您最喜欢的颜色是什么？',
  '您的第一所学校叫什么名字？',
  '您最喜欢的食物是什么？',
  '您的宠物叫什么名字？'
]

// 修改密码
const changePassword = () => {
  // 验证表单
  if (!formData.oldPassword) {
    uni.showToast({
      title: '请输入原密码',
      icon: 'none'
    })
    return
  }
  
  if (!formData.newPassword) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none'
    })
    return
  }
  
  if (passwordStrength.value.level < 3) {
    uni.showToast({
      title: '密码强度不够',
      icon: 'none'
    })
    return
  }
  
  if (formData.newPassword !== formData.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }
  
  if (formData.oldPassword === formData.newPassword) {
    uni.showToast({
      title: '新密码不能与原密码相同',
      icon: 'none'
    })
    return
  }
  
  // 这里可以调用API修改密码
  uni.showLoading({
    title: '修改中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '密码修改成功',
      icon: 'success'
    })
    
    // 清空表单
    formData.oldPassword = ''
    formData.newPassword = ''
    formData.confirmPassword = ''
  }, 2000)
}

// 重置表单
const resetForm = () => {
  formData.oldPassword = ''
  formData.newPassword = ''
  formData.confirmPassword = ''
  formData.securityQuestion = ''
  formData.securityAnswer = ''
}

// 设置安全问题
const setSecurityQuestion = () => {
  if (!formData.securityQuestion) {
    uni.showToast({
      title: '请选择安全问题',
      icon: 'none'
    })
    return
  }
  
  if (!formData.securityAnswer) {
    uni.showToast({
      title: '请回答安全问题',
      icon: 'none'
    })
    return
  }
  
  uni.showToast({
    title: '安全问题设置成功',
    icon: 'success'
  })
}
</script>

<template>
  <view class="password-page">
    <!-- 自定义导航栏 -->
    <TnNavbar
      :fixed="true"
      :transparent="false"
      :title="t('settings.password')"
      :background-color="'#ffffff'"
      :color="'#000000'"
    />
    
    <view class="page-content">
      <view class="page-header">
        <view class="header-title">{{ t('settings.password') }}</view>
        <view class="header-desc">修改您的登录密码</view>
      </view>
    
    <!-- 密码修改表单 -->
    <view class="password-form">
      <view class="form-item">
        <view class="form-label">原密码</view>
        <view class="form-input">
          <input 
            v-model="formData.oldPassword" 
            :type="showOldPassword ? 'text' : 'password'"
            placeholder="请输入原密码"
          />
          <view class="password-toggle" @click="showOldPassword = !showOldPassword">
            <TnIcon :name="showOldPassword ? 'eye-fill' : 'eye-slash-fill'" />
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">新密码</view>
        <view class="form-input">
          <input 
            v-model="formData.newPassword" 
            :type="showNewPassword ? 'text' : 'password'"
            placeholder="请输入新密码"
          />
          <view class="password-toggle" @click="showNewPassword = !showNewPassword">
            <TnIcon :name="showNewPassword ? 'eye-fill' : 'eye-slash-fill'" />
          </view>
        </view>
      </view>
      
      <!-- 密码强度指示器 -->
      <view v-if="formData.newPassword" class="password-strength">
        <view class="strength-bar">
          <view 
            class="strength-fill" 
            :style="{ 
              width: `${(passwordStrength.level / 5) * 100}%`,
              backgroundColor: passwordStrength.color 
            }"
          ></view>
        </view>
        <view class="strength-text" :style="{ color: passwordStrength.color }">
          密码强度：{{ passwordStrength.text }}
        </view>
        <view class="strength-feedback">
          <view 
            v-for="(item, index) in passwordStrength.feedback" 
            :key="index"
            class="feedback-item"
          >
            • {{ item }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">确认密码</view>
        <view class="form-input">
          <input 
            v-model="formData.confirmPassword" 
            :type="showConfirmPassword ? 'text' : 'password'"
            placeholder="请再次输入新密码"
          />
          <view class="password-toggle" @click="showConfirmPassword = !showConfirmPassword">
            <TnIcon :name="showConfirmPassword ? 'eye-fill' : 'eye-slash-fill'" />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 安全问题设置 -->
    <view class="security-section">
      <view class="section-title">安全问题设置</view>
      <view class="security-form">
        <view class="form-item">
          <view class="form-label">安全问题</view>
          <view class="form-select">
            <picker 
              :value="securityQuestions.indexOf(formData.securityQuestion)" 
              :range="securityQuestions"
              @change="(e) => formData.securityQuestion = securityQuestions[e.detail.value]"
            >
              <view class="picker-text">
                {{ formData.securityQuestion || '请选择安全问题' }}
                <TnIcon name="right" />
              </view>
            </picker>
          </view>
        </view>
        
        <view class="form-item">
          <view class="form-label">安全答案</view>
          <view class="form-input">
            <input 
              v-model="formData.securityAnswer" 
              :type="showSecurityAnswer ? 'text' : 'password'"
              placeholder="请输入安全答案"
            />
            <view class="password-toggle" @click="showSecurityAnswer = !showSecurityAnswer">
              <TnIcon :name="showSecurityAnswer ? 'eye-fill' : 'eye-slash-fill'" />
            </view>
          </view>
        </view>
        
        <view class="security-action">
          <TnButton 
            @click="setSecurityQuestion"
            type="primary"
            size="small"
          >
            设置安全问题
          </TnButton>
        </view>
      </view>
    </view>
    
    <!-- 密码要求提示 -->
    <view class="password-tips">
      <view class="tip-title">密码要求：</view>
      <view class="tip-item">• 长度至少8位</view>
      <view class="tip-item">• 建议包含字母、数字和特殊字符</view>
      <view class="tip-item">• 不能与原密码相同</view>
      <view class="tip-item">• 定期更换密码以提高安全性</view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <TnButton 
        @click="changePassword"
        type="primary"
        :disabled="!formData.oldPassword || !formData.newPassword || !formData.confirmPassword"
      >
        确认修改
      </TnButton>
      <TnButton 
        @click="resetForm"
        type="default"
      >
        重置
      </TnButton>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.password-page {
  background-color: var(--tn-color-gray-light);
  min-height: 100vh;
}

.page-content {
  padding: 30rpx;
  padding-top: calc(30rpx + 88px);
}

.page-header {
  margin-bottom: 40rpx;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 10rpx;
  }
  
  .header-desc {
    font-size: 28rpx;
    color: var(--tn-text-color-secondary);
  }
}

.password-form {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid var(--tn-color-gray-light);
    
    &:last-child {
      border-bottom: none;
    }
    
    .form-label {
      width: 200rpx;
      font-size: 32rpx;
      color: var(--tn-text-color-primary);
    }
    
    .form-input {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
      
      input {
        flex: 1;
        font-size: 32rpx;
        color: var(--tn-text-color-primary);
      }
      
      .password-toggle {
        padding: 10rpx;
        color: var(--tn-text-color-secondary);
        font-size: 32rpx;
      }
    }
  }
  
  .password-strength {
    padding: 20rpx 0;
    
    .strength-bar {
      height: 8rpx;
      background-color: var(--tn-color-gray-light);
      border-radius: 4rpx;
      overflow: hidden;
      margin-bottom: 10rpx;
      
      .strength-fill {
        height: 100%;
        transition: all 0.3s ease;
      }
    }
    
    .strength-text {
      font-size: 26rpx;
      margin-bottom: 10rpx;
    }
    
    .strength-feedback {
      .feedback-item {
        font-size: 24rpx;
        color: var(--tn-text-color-secondary);
        margin-bottom: 5rpx;
      }
    }
  }
}

.security-section {
  margin-bottom: 40rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 20rpx;
    padding-left: 20rpx;
  }
  
  .security-form {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    
    .form-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid var(--tn-color-gray-light);
      
      &:last-child {
        border-bottom: none;
      }
      
      .form-label {
        width: 200rpx;
        font-size: 32rpx;
        color: var(--tn-text-color-primary);
      }
      
      .form-select {
        flex: 1;
        
        .picker-text {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 32rpx;
          color: var(--tn-text-color-primary);
          
          .tn-icon {
            color: var(--tn-text-color-secondary);
            font-size: 28rpx;
          }
        }
      }
      
      .form-input {
        flex: 1;
        display: flex;
        align-items: center;
        position: relative;
        
        input {
          flex: 1;
          font-size: 32rpx;
          color: var(--tn-text-color-primary);
        }
        
        .password-toggle {
          padding: 10rpx;
          color: var(--tn-text-color-secondary);
          font-size: 32rpx;
        }
      }
    }
    
    .security-action {
      padding-top: 20rpx;
      text-align: center;
    }
  }
}

.password-tips {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .tip-title {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 20rpx;
  }
  
  .tip-item {
    font-size: 28rpx;
    color: var(--tn-text-color-secondary);
    margin-bottom: 10rpx;
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style> 